<!--
 * @Author: your name
 * @Date: 2020-02-07 16:55:37
 * @LastEditTime : 2020-02-10 10:06:06
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-components\demo\src\components\UpdateScheme.vue
 -->
<template>
  <div>
      <el-cascader :options="options">
        <template slot-scope="{ node, data }">

            <span style="display:inline-block;width:160px;overflow:hidden;">{{ data.label.padEnd(30) }} </span>
            <span style="display:inline-block;width:40px;overflow:hidden;">李大哥</span>
            <span style="display:inline-block;width:100px;overflow:hidden;">（2019-10-20）</span>
        </template>
      </el-cascader>

  </div>
</template>

<script>
export default {
    data(){
      return {
          options: [{
            value: 'zhinan',
            label: '指南指南指南指南指南指南指南指南指南指南指南指南指南指南指南指南指南',
            }, {
              value: 'daohang',
              label: '导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航'
          }, {
            value: 'zujian',
            label: '组件'
            }, {
              value: 'others',
              label: 'Others'           
          }, {
            value: 'ziyuan',
            label: '资源组件组件组件',
          }]
      }
    },
    methods: {
      
    },
    mounted () {
      this.options.forEach(item=>{
         item.label = item.label.padEnd(30);

      })
      console.log(this.options)
    }
}
</script>

<style>

</style>